<template>
  <div class="ClassificationView" v-if="classification.cs.length > 0">
    <div class="header">
      <div class="left">
        <div class="back" @click="back">
          <van-icon name="arrow-left" size="25" />
        </div>
        <div class="title">菜谱分类</div>
      </div>
      <div class="right" @click="toSearch">
        <van-icon name="search" size="25" />
      </div>
    </div>
    <div class="sidebar">
      <van-sidebar v-model="active" style="width: 90px" @change="onChange">
        <van-sidebar-item
          v-for="item in classification.cs"
          :key="item.id"
          :title="item.name"
          style="font-size: 15px"
        />
      </van-sidebar>
    </div>
    <div class="classification" ref="classify">
      <div
        class="classify"
        v-for="(classify, index) in classification.cs[active].cs"
        :key="classify.id"
      >
        <div class="title" @click="toSearched(classify.name)">
          <van-image
            width="245"
            height="auto"
            :src="classify.image_url"
            lazy-load
          />
        </div>
        <div class="cs">
          <div
            class="csName"
            v-for="(cs, index) in classify.cs"
            :key="cs.id"
            @click="toSearched(cs.name)"
          >
            {{ cs.name }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from "@/router";
import { useDouguoStore } from "@/stores/douguo";
import { storeToRefs } from "pinia";
import { ref } from "vue";

const douguo = useDouguoStore();

const { classification } = storeToRefs(douguo);
const { updataClassification } = douguo;

updataClassification();

const active = ref(0);

const back = () => {
  history.go(-1);
};

const toSearch = () => {
  // console.log("toSearch");
  router.push({ path: "/search" });
};

const toSearched = (kw: string) => {
  // console.log("toSearch");
  let historySearch = new Set(
    JSON.parse(localStorage.getItem("historySearch") || "[]")
  );
  // console.log(historySearch);

  router.push({ path: "/searched", query: { kw } });
  historySearch.add(kw);
  // console.log(historySearch);

  localStorage.setItem(
    "historySearch",
    JSON.stringify(Array.from(historySearch))
  );
};

const classify = ref<HTMLElement>();

const onChange = () => {
  // console.log("onChange", classify.value?.scrollTop);
  classify.value.scrollTop = 0;
};
</script>

<style lang="scss" scoped>
.ClassificationView {
  padding-left: 90px;
  padding-top: 50px;

  .header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    background-color: white;
    border-bottom: 1px solid #e2e2e2;
    height: 50px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      margin-left: 15px;
      display: flex;
      align-items: center;

      .back {
        width: 25px;
        height: 25px;
        cursor: pointer;
      }

      .title {
        margin-left: 33px;
        font-weight: bold;
        font-size: 20px;
      }
    }

    .right {
      margin-right: 14px;
      cursor: pointer;
    }
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 50px;
    height: 617px;
    overflow-y: scroll;

    :deep(.van-sidebar-item--select::before) {
      background-color: #fec531;
      left: 80px;
      border-radius: 5px;
      height: 25px;
    }
  }

  .classification {
    height: 617px;
    overflow-y: scroll;
    padding-top: 15px;

    .classify {
      padding: 0 20px;
      margin-bottom: 5px;
      display: flex;
      flex-direction: column;

      .title {
        cursor: pointer;
        margin-bottom: 8px;
        align-self: center;
        border-radius: 5px;
      }

      .cs {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        // justify-content: space-between;

        .csName {
          // width: 73px;
          min-width: 60px;
          padding: 0 5px;
          height: 40px;
          text-align: center;
          line-height: 40px;
          border: 1px solid #f2f2f2;
          border-radius: 5px;
          font-size: 14px;
          margin: 0 4px;
          margin-bottom: 5px;
        }
      }
    }
  }
}
</style>
